<template>
  <el-dialog v-model="dialogVisible" :append-to-body="true" title="Settings" width="50%">
    <el-form ref="form" :model="form" label-width="12%">
      <!--      <el-form-item label="zindex:">-->
      <!--        <el-input-number v-model="form.index" :step="1"></el-input-number>-->
      <!--      </el-form-item>-->
      <!-- 添加宽度输入项 -->
      <el-form-item label="width:">
        <el-input v-model="width"></el-input>
      </el-form-item>
      <!-- 添加高度输入项 -->
      <el-form-item label="height:">
        <el-input v-model="height"></el-input>
      </el-form-item>
      <el-form-item label="text:">
        <el-input v-model="text"></el-input>
      </el-form-item>
      <el-form-item label="text-color:">
        <el-select v-model="color" placeholder="Please Select">
          <el-option label="white" value="#ffffff"></el-option>
          <el-option label="black" value="#000000"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="confirm">Confirm</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import * as d3 from 'd3'
import {defineModel, defineProps, ref, watchEffect} from 'vue';

let dialogVisible = defineModel('visible')
const props = defineProps({
  form: Object
})
const text = ref()
const color = ref()
const width = ref()
const height = ref()
watchEffect(() => {
  text.value = props?.form?.text ? props.form.text.toString() : null
  color.value = props?.form?.color ? props.form.color.toString() : null
  width.value = props?.form?.width ? props.form.width.toString() : null
  height.value = props?.form?.height ? props.form.height.toString() : null
})

function confirm() {
  d3.select(`#${props.form.id}`)
      .attr('text', text.value)
      .attr('color', color.value)
      .attr('width', width.value)
      .attr('height', height.value)
  dialogVisible.value = false
}
</script>

<style scoped>

</style>
